<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生信息表单</title>
    <style>
        table{
            margin: 0 auto;
        }
        caption{
            margin-bottom: 20px;
        }
        .gs{
            font-size: 12px;
            color: #666;
        }
    </style>
  </head>
  <body>
    <table>
      <caption>
       <b>学生信息注册</b> 
      </caption>
      <tr>
        <td>姓名：</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>性别：</td>
        <td>
          <input type="radio" name="sex" id="nan" /><label for="nan">男</label
          ><input type="radio" name="sex" id="nv" /><label for="nv">女</label>
        </td>
      </tr>
      <tr>
        <td>出生日期</td>
        <td><input type="text" id="hello"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="" class="gs">按格式yyyy-mm-dd</label></td>
      </tr>
      <tr>
        <td>学校：</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>专业：</td>
        <td>
          <select name="zhuanye" id="">
            <option value="" selected="selected">计算机科学与技术</option>
            <option value="">移动软件</option>
            <option value="">数据科学</option>
            <option value="">人工智能</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>体育特长：</td>
        <td>
          <input type="checkbox" id="lq" /><label for="lq">篮球</label
          ><input type="checkbox" id="pq" /><label for="pq">排球</label
          ><input type="checkbox" id="zq" /><label for="zq">足球</label
          ><input type="checkbox" id="yy" /><label for="yy">游泳</label>
        </td>
      </tr>
      <tr>
        <td>上传照片：</td>
        <td><input type="file"></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" id="postwa"></td>
      </tr>
      <tr>
        <td>个人介绍：</td>
        <td><textarea name="" id="" cols="35" rows="5"></textarea></td>
      </tr>
      <tr>
        <th><button id="but">提交</button> <button>取消</button></th>
        <th></th>
      </tr>
    </table>
    <script>
      input1 = document.getElementById("hello");
      input2 = document.getElementById("postwa");
      but = document.getElementById("but");
      var str1;
      var str2;
      input1.onchange = function(){
        str1 = input1.value;
      }
      input2.onchange = function(){
        str2 = input2.value;
      }
      but.onclick = function(){
        if(str1.length!=10||str2.length<8){
            alert("出生日期格式错误");
        }
      }
    </script>
  </body>
</html>
